<template>
    <div class="app-container">
      <el-form label-width="120px">
        <el-form-item label="客户昵称">
          <el-input v-model="user.nickname" />
        </el-form-item>
        <el-form-item label="邮箱地址">
          <el-input
            v-model="user.email"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="user.sex" clearable placeholder="选择客户性别">
            <el-option :value="1" label="女" />
            <el-option :value="2" label="男" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户年龄">
          <el-input v-model="user.age" />
        </el-form-item>

        <el-form-item>
          <el-button
            :disabled="saveBtnDisabled"
            type="primary"
            @click="updateUser"
          >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
  import userApi from '../../../api/user/user'

  export  default {
    data(){
      return{
        user:{},
        saveBtnDisabled:false,//保存按钮是否禁用
      }
    },
    created() {
      this.init();
    },
    watch:{
      $route(to,from){//路由变化方式
        this.init();
      }
    },
    methods:{
      init(){
          const id = this.$route.params.id
          this.getInfo(id);
      },
      getInfo(id){
        userApi.getUserInfo(id)
        .then(response=>{
          this.user = response.data.user
        })
      },
      //修改讲师的方法
      updateUser(){
        userApi.updateUser(this.user)
        .then(response=>{
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          //回到列表页面  路由跳转
          this.$router.push({path:'/user/table'})
        })
      },

    }
  }
</script>
